<!--
 * @Author: your name
 * @Date: 2020-07-08 10:40:40
 * @LastEditTime: 2020-07-10 10:15:32
 * @LastEditors: Please set LastEditors
 * @Description: 历史记录
--> 

<template>
  <div class="history">
    <div class="content">
      <h1>历史记录</h1>
      <el-table
        :data="list"
        border
        :header-cell-style="{background:'#0077af',color:'#eff',fontSize:'16px'}"
        :cell-style="{padding:'7px 0',backgroundColor:'#f0f2f5'}"
        style="width: 100%"
        :resizable="false"
      >
        <el-table-column prop="modifyTime" label="考试时间" :resizable="false"></el-table-column>
        <el-table-column prop="expname" label="考试名称" :resizable="false"></el-table-column>
        <el-table-column label="测试类型" :resizable="false">
          <template slot-scope="scope">
            <span v-if="scope.row.exptype == 1">小考</span>
            <span v-else>考试</span>
          </template>
        </el-table-column>
        <el-table-column prop="expduration" label="考试时长" :resizable="false"></el-table-column>
        <el-table-column prop="expscore" label="考试合格分数" :resizable="false"></el-table-column>
        <el-table-column prop="score" label="得分" width="99" :resizable="false"></el-table-column>
        <el-table-column label="选项" width="100" :resizable="false">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination></pagination>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/history.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1 //当前页
    };
  },
  methods: {
    handleClick(row) {
      this.$router.push({path:"/exam_view",query:{id:row.id}});
    },
    async API_reportList() {
      return await api.reportList();
    }
  },
  computed: {
    list() {
      this.$eventBus.$on("currentPage", res => {
        this.currentPage = res;
      });
      return this.tableData.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    }
  },
  async created() {
    let res = await this.API_reportList();
    console.log(res);
    if (res.data.statusCode === "200") {
      this.tableData = res.data.content;
    }
    this.total = this.tableData.length;
    this.pagesize = 8;
    console.log(this.total);
  }
};
</script>

<style>
.history {
  background-color: #f0f2f5;
}
.history > .content {
  width: 58%;
  margin: 0 auto;
  position: relative;
  padding-top: 50px;
}
.history .el-table {
  width: 100%;
}
h1 {
  font-size: 32px;
  color: #0077af;
  padding: 16px;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: black;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before,
.el-table__fixed-right::before {
  background-color: black;
}
.el-button > span {
  font-size: 14px;
}
.el-table .el-table__body-wrapper .cell,
.el-table--border .el-table__body-wrapper td:first-child .cell,
.el-table--border .el-table__body-wrapper th:first-child .cell {
  padding: 0px;
  padding-left: 15px;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgb(230, 247, 255) !important;
}
.pagination {
  right: 0;
  margin-top: 10px;
}
</style>